<!doctype html>



  


<html class="theme-next mist use-motion" lang="zh-CH">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />















  
  
  <link href="/niko/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/niko/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/niko/css/main.css?v=5.1.1" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="Hexo, NexT" />








  <link rel="shortcut icon" type="image/x-icon" href="/niko/favicon.ico?v=5.1.1" />






<meta property="og:type" content="website">
<meta property="og:title" content="NikoBlog">
<meta property="og:url" content="http://git.oschina.net/280772270/niko/index.html">
<meta property="og:site_name" content="NikoBlog">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="NikoBlog">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/niko/',
    scheme: 'Mist',
    sidebar: {"position":"left","display":"post","offset":12,"offset_float":0,"b2t":false,"scrollpercent":false},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: 'Author'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://git.oschina.net/280772270/niko/"/>





  <title>NikoBlog</title>
  














</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-CH">

  
  
    
  

  <div class="container sidebar-position-left 
   page-home 
 ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/niko/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">NikoBlog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle">TecBlog</p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/niko/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            Startseite
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/niko/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            Archiv
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/niko/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            Tags
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            
  <section id="posts" class="posts-expand">
    
      

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="http://git.oschina.net/280772270/niko/niko/2017/06/20/0.引/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Yifei's">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/niko/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="NikoBlog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/niko/2017/06/20/0.引/" itemprop="url">Unbenannt</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Veröffentlicht am</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2017-06-20T10:27:12+08:00">
                2017-06-20
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h1 id="0-引"><a href="#0-引" class="headerlink" title="0.引"></a>0.引</h1><h2 id="Weex"><a href="#Weex" class="headerlink" title="Weex"></a>Weex</h2><p>无疑，Weex成为了最火的移动技术<strong>之一</strong>，但是，因为开源时间相对较短，铺建的基础设施较大。业界目前还没有特别丰富的Demo、实践的案例、工程化的方案供大家参考。<br>本文适合有一定的web开发经验的开发者，能看懂HTML+CSS以及少量的js，可以稍微看一下附录9，会有所帮助。</p>
<h2 id="WEEX"><a href="#WEEX" class="headerlink" title="WEEX"></a>WEEX</h2><h3 id="WEEX快速入门"><a href="#WEEX快速入门" class="headerlink" title="WEEX快速入门"></a>WEEX快速入门</h3><ol>
<li>HellowWeex    </li>
<li>了解Weex源码结构，修改example</li>
<li>初始化工程干了一件什么事儿            </li>
<li>了解工程  </li>
<li>ide的配置和选择</li>
<li>模版、样式、JavaScript</li>
<li>weex自带组件的使用</li>
<li>01.Weex组件分离<br> 02.weex组件通讯</li>
<li>if repeat 的使用</li>
<li>界面跳转与传值</li>
</ol>
<h3 id="应用参考"><a href="#应用参考" class="headerlink" title="应用参考"></a>应用参考</h3><ol>
<li><a href="https://github.com/vczero/weex-yy" target="_blank" rel="external">微阅读应用</a>         </li>
<li><a href="https://github.com/dodola/WeexOne" target="_blank" rel="external">One</a></li>
<li><a href="https://github.com/charlescui/weex-baji" target="_blank" rel="external">baji电台</a></li>
<li>班豆(weex上线项目)</li>
</ol>
<h3 id="F-amp-Q"><a href="#F-amp-Q" class="headerlink" title="F&amp;Q"></a>F&amp;Q</h3><ol>
<li><a href="http://weex.help" target="_blank" rel="external">Weex中文社区</a>    </li>
<li><a href="https://gitter.im/weexteam/cn?utm_source=share-link&amp;utm_medium=link&amp;utm_campaign=share-link" target="_blank" rel="external">Weex中文聊天室</a>            </li>
<li>Weex交流QQ群：572735902</li>
<li><a href="https://github.com/alibaba/weex/issues" target="_blank" rel="external">关于问题解决大多数都可以在weex的issue里面找到</a></li>
<li>关于新建项目tabbar组件不显示的问题 在template中使用到了一些控件很多人启动的时候发现会发报错这是因为其实这些控件是 weex-components 模块中的一个组件，使用前需要引用 weex-components模块<br>require(“weex-components”);<br>项目中引入，可以在项目根目录中执行以下命令：<br>npm install weex-components –save</li>
</ol>
<h3 id="附录"><a href="#附录" class="headerlink" title="附录"></a>附录</h3><ol>
<li><a href="http://awhisper.github.io/2016/07/22/Weex-ReactNative-JSPatch/" target="_blank" rel="external">Weex &amp; ReactNative &amp; JSPatch</a>    </li>
<li><a href="https://zhuanlan.zhihu.com/p/21677103" target="_blank" rel="external">Weex和RN对比</a>            </li>
<li><a href="https://open.taobao.com/doc2/detail?spm=a219a.7629140.0.0.tFddsV&amp;&amp;docType=1&amp;articleId=104829" target="_blank" rel="external">weex iOS 集成指南</a></li>
<li><a href="http://vodcdn.video.taobao.com/oss/taobao-ugc/5ce842e3461d4d3bbcb58e57ae4387c5/1473820504/video.mp4" target="_blank" rel="external">weexDevTools 视频教程</a></li>
<li><a href="https://segmentfault.com/a/1190000004363303" target="_blank" rel="external">Weex——关于移动端动态性的思考、实现和未来</a></li>
<li><a href="https://segmentfault.com/a/1190000005060563" target="_blank" rel="external">深度揭秘阿里移动端高性能动态化方案Weex</a></li>
<li><a href="http://www.w3school.com.cn" target="_blank" rel="external">w3cSchool</a></li>
<li><a href="http://www.helloxcx.com" target="_blank" rel="external">微信小程序</a></li>
<li><a href="https://getfullstack.com" target="_blank" rel="external">web全栈技术指南</a></li>
<li><a href="http://mp.weixin.qq.com/s?__biz=MzA4MjA0MTc4NQ==&amp;mid=2651573630&amp;idx=1&amp;sn=d536872e9aeabf3581b02e648b588a51&amp;scene=1&amp;srcid=0908HEvDLOd4adByh6u5ju15#rd" target="_blank" rel="external">weex快速上手教程</a></li>
</ol>

          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="http://git.oschina.net/280772270/niko/niko/2017/06/20/1.HellowWeex/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Yifei's">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/niko/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="NikoBlog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/niko/2017/06/20/1.HellowWeex/" itemprop="url">Unbenannt</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Veröffentlicht am</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2017-06-20T10:27:12+08:00">
                2017-06-20
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h1 id="1-HellowWeex"><a href="#1-HellowWeex" class="headerlink" title="1.HellowWeex"></a>1.HellowWeex</h1><h2 id="Weex是什么？"><a href="#Weex是什么？" class="headerlink" title="Weex是什么？"></a>Weex是什么？</h2><p>Weex是阿里开源的一套构建跨平台的移动框架。对于前端，最直观的是web components的开发方式；对于Native同学，可以理解为使用web的开发方式构建跨平台移动程序（iOS &amp; Android）。可以类比的是React Native，但是相对React Native更为彻底：不仅统一了 iOS/Android的差异，更是实现了三端的统一。2016年，weex值得去关注，因为目前移动端的痛点是需要被攻克的难题。而这一块也是大家孜孜不倦的努力探索的结果。<br>Weex更多细节参考： <a href="http://alibaba.github.io/weex/index.html。" target="_blank" rel="external">http://alibaba.github.io/weex/index.html。</a>    </p>
<h2 id="Hello-world"><a href="#Hello-world" class="headerlink" title="Hello world"></a>Hello world</h2><p>现在的开发方式，不像以前直接1个html文件就可以的。任何工程化的体系都有相配套的工具。</p>
<h3 id="第0步：安装Node-js"><a href="#第0步：安装Node-js" class="headerlink" title="第0步：安装Node.js"></a>第0步：安装Node.js</h3><p>如何安装，这里不赘述了，可以直接到Node.js官网下载安装。安装Node.js的同时会帮助我们安装好npm。 初步安装的同学可以使用:  </p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line">$ node -v</div><div class="line">v6.3.1</div><div class="line">$ npm -v</div><div class="line">3.10.3</div><div class="line">```	</div><div class="line">node -v 和 npm -v 命令来测试Node.js环境是否搭建成功。	</div><div class="line"><span class="comment">### 第1步：安装weex-toolkit      </span></div><div class="line">这里使用npm来完成。因为npm之前已经安装好了。所以，直接拿来使用即可。      </div><div class="line"></div><div class="line">```bash</div><div class="line">$ npm install -g weex-toolkit    </div><div class="line">```	  </div><div class="line">	</div><div class="line">如果发现很慢，说明是时候考虑使用cnpm来安装了。首先，我们全局安装cnpm：     </div><div class="line"></div><div class="line">```bash</div><div class="line">$ npm install -g cnpm</div></pre></td></tr></table></figure>
<p>cnpm是一个国内npm镜像，可以提高下载速度。我们使用cnpm：     </p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">$ cnpm install -g weex-toolkit      </div><div class="line">``` </div><div class="line"></div><div class="line">**备注：** 若提示权限问题，加上``sudo``关键字即可(管理员权限，和Win下右键以管理员身份运行一样)。例如：  </div><div class="line"> </div><div class="line">```bash </div><div class="line">$ sudo npm install -g weex-toolkit</div></pre></td></tr></table></figure>
<p> 然后输入你本机电脑密码即可。       </p>
<p> weex-toolkit安装完成后，输入:</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">$ weex --version    </div><div class="line">info 0.4.4</div></pre></td></tr></table></figure>
<p>说明，我们安装成功。               </p>
<h3 id="第2步：创建文件"><a href="#第2步：创建文件" class="headerlink" title="第2步：创建文件"></a>第2步：创建文件</h3><p>weex程序的文件后缀（扩展名）是.we。因此我们创建一个.we的文件。Linux下可以使用touch命令创建文件。      </p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ touch hello.we</div></pre></td></tr></table></figure>
<p>我们打开空白的hello.we文件，输入三个标签，内容为：       </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span><span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span>      </div><div class="line">```	</div><div class="line">	</div><div class="line">其实，这个时候，我们的程序完成了，就是这么简单粗暴。开发完成了，这段代码是不能直接跑的。我们都知道.html是可以直接运行的，这个程序呢，缺少了html的载体，同时只是xml的子集。那么，我们就需要使用weex-toolkit来编译我们的代码了。这里，使用weex命令编译hello.we文件。              </div><div class="line"></div><div class="line">```bash</div><div class="line">$ weex hello.we       </div><div class="line">```	</div><div class="line">	 </div><div class="line">这时，会发现浏览器被打开了，浏览器地址是：        </div><div class="line"></div><div class="line">``http://127.0.0.1:8081/weex_tmp/h5_render/?hot-reload_controller&amp;page=hello.js&amp;loader=xhr``          </div><div class="line"></div><div class="line">这是浏览器是空白的，因为我们没有添加任何实质的内容。          </div><div class="line"></div><div class="line">### 第3步：添加内容     </div><div class="line">我们修改weex.we文件，像 hello.we 的 template 添加内容。 weex.we文件内容如下：        </div><div class="line"></div><div class="line">```html</div><div class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">text</span>&gt;</span>Hello world<span class="tag">&lt;/<span class="name">text</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span>       </div><div class="line">```	</div><div class="line">	 </div><div class="line">我们再次编译hello.we文件：    </div><div class="line"></div><div class="line">```bash</div><div class="line">$ weex hello.we       </div><div class="line">```	</div><div class="line"></div><div class="line">OK，我们会看到浏览器显示了：Hello world字样。        </div><div class="line"></div><div class="line">### 第5步：增加样式       </div><div class="line"> 我们给text增加样式，具体代码如下：           </div><div class="line"></div><div class="line">```html </div><div class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">div</span>&gt;</span></div><div class="line">		<span class="tag">&lt;<span class="name">text</span> <span class="attr">class</span>=<span class="string">"text"</span> <span class="attr">style</span>=<span class="string">"color:red;"</span>&gt;</span>Hello world<span class="tag">&lt;/<span class="name">text</span>&gt;</span></div><div class="line">	<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></div><div class="line">	.text&#123;</div><div class="line">		font-size:160;</div><div class="line">	&#125;</div><div class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<p>weex-toolkit <strong> 会帮我们重载页面 </strong>（前提是在文档修改完成的时候保存一下就可以了）。浏览器可以看到“Hello world”字样。</p>
<p><img src="resources/11FF2901D1F2ED241F58B2E646DBBB32.png" alt="001\_1.png"></p>
<p>weex中支持<code>style</code>和<code>class</code>来设定样式。但是font-size：160后面没有px。因此，css需要统一web和Native。weex做了兼容和取舍，目前支持的样式如下： <a href="http://alibaba.github.io/weex/doc/references/common-style.html" target="_blank" rel="external">http://alibaba.github.io/weex/doc/references/common-style.html</a>     </p>
<h3 id="第6步：-html文件载体在哪"><a href="#第6步：-html文件载体在哪" class="headerlink" title="第6步：.html文件载体在哪"></a>第6步：.html文件载体在哪</h3><p>我们既然运行了程序，那么一定有一个.html作为程序入口。其实，weex-toolkit给我们生成了相关文件。我们可以到hello.we同级目录下查找，就会发现有一个weex_tmp文件。该文件夹就是生成的可以执行的浏览器代码。       </p>
<p><img src="resources/DF849B4CB38DDF064FE6B85E827F45A6.png" alt="QQ20160926-1.png"></p>
<h3 id="第7步：实践"><a href="#第7步：实践" class="headerlink" title="第7步：实践"></a>第7步：实践</h3><p>和web不同的是div<strong>不可以</strong>直接在里面写字，因为text组件是用来渲染文本的。在weex或者react native中，类似的这些标签不再是html元素了，而是组件。组件的意思是，每个组件承载各自的功能，区分明显；不像web那样自由。 </p>
<p>其它组件有哪些？哪些组件可以使用？<br>参考： <a href="http://alibaba.github.io/weex/doc/" target="_blank" rel="external">http://alibaba.github.io/weex/doc/</a> </p>

          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="http://git.oschina.net/280772270/niko/niko/2017/06/20/2.初识Weexdemo-Example/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Yifei's">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/niko/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="NikoBlog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/niko/2017/06/20/2.初识Weexdemo-Example/" itemprop="url">Unbenannt</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Veröffentlicht am</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2017-06-20T10:27:12+08:00">
                2017-06-20
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h1 id="2-初识Weexdemo-Example"><a href="#2-初识Weexdemo-Example" class="headerlink" title="2.初识Weexdemo-Example"></a>2.初识Weexdemo-Example</h1><h2 id="了解Weex源码结构，修改example"><a href="#了解Weex源码结构，修改example" class="headerlink" title="了解Weex源码结构，修改example"></a>了解Weex源码结构，修改example</h2><p>其实，写一个简单的带有样式的界面还是挺简单的。接下来就是要学习官方给的example示例，看一下官方的目录结构以及示例代码，开发过程中遇到的不明白的问题其实很多都能在官方demo里找到答案。         </p>
<h2 id="1-下载Weex源码"><a href="#1-下载Weex源码" class="headerlink" title="1. 下载Weex源码"></a>1. 下载Weex源码</h2><p><a href="https://github.com/alibaba/weex" target="_blank" rel="external">weexGithub</a><br>这里可以用 <strong>git clone</strong> 或者直接download</p>
<pre><code>$ git clone https://github.com/alibaba/weex.git    
</code></pre><h2 id="2-了解源码结构"><a href="#2-了解源码结构" class="headerlink" title="2.了解源码结构"></a>2.了解源码结构</h2><p>代码下载完成了，先看一下源码的目录结构。  </p>
<p><img src="resources/EAFF24F8C94E94BDA4EF1111E6B93CA1.png" alt="QQ20160926-1.png"></p>
<p>有几个比较重要的目录和文件：  </p>
<ul>
<li>package.json :    node_modules依赖，更重要的是里面包含了npm run xxx 等快捷命令。这里我们可以把它配置化，例如package.json文件中的：        </li>
</ul>
<p><img src="resources/2921B70E8426AEF20538254492591280.png" alt="QQ20160926-2.png"></p>
<ul>
<li><p>start文件: 启动程序文件，<strong>相当于Windows下面的*.bat脚本文件</strong>：      </p>
<pre><code>#called by native   
THIS_DIR=$(dirname &quot;$0&quot;)
pushd &quot;$THIS_DIR&quot;

npm run build:native
npm run build:browser
npm run serve &amp;
npm run dev:examples

popd
</code></pre></li>
</ul>
<p>其中npm run就是执行package.json中的定义好的脚本别名。          </p>
<ul>
<li>examples: 示例Demo      </li>
<li>android/ios/html： 各平台代码   </li>
<li>build：打包各平台的脚本，配置在package.json中。         </li>
</ul>
<h2 id="3-运行Weex"><a href="#3-运行Weex" class="headerlink" title="3.运行Weex"></a>3.运行Weex</h2><p>下面是weex github仓库README.md，按照下面步骤即可跑起来。     </p>
<h3 id="Android"><a href="#Android" class="headerlink" title="Android"></a>Android</h3><ol>
<li>Prerequisites<ol>
<li>Install <a href="http://nodejs.org/" target="_blank" rel="external">Node.js</a> 4.0+</li>
<li>Under project root <ol>
<li><code>npm install</code>, install project </li>
<li><code>./start</code></li>
</ol>
</li>
<li>Install <a href="http://developer.android.com/training/basics/firstapp/index.html" target="_blank" rel="external">Android Environment</a></li>
</ol>
</li>
<li>Run playground, In Android Studio<ol>
<li>Open <code>android/playground</code></li>
<li>In <code>app/java/com.alibaba.weex/IndexActivity</code>, modify <code>CURRENT_IP</code> to your local IP</li>
<li>Click <img src="http://gtms04.alicdn.com/tps/i4/TB1wCcqMpXXXXakXpXX3G7tGXXX-34-44.png" height="16"> (<code>Run</code> button)</li>
</ol>
</li>
<li><a href="./examples/README.md#add-an-example">Add an example</a></li>
</ol>
<h4 id="Runtime"><a href="#Runtime" class="headerlink" title="Runtime"></a>Runtime</h4><p>On Android Platform , Weex code is executed in <a href="https://github.com/alibaba/weex_v8core" target="_blank" rel="external">weex_v8core</a> which is based on Google V8 JavaScript engine.</p>
<h3 id="iOS"><a href="#iOS" class="headerlink" title="iOS"></a>iOS</h3><ol>
<li>Prerequisites<ol>
<li>Install <a href="http://nodejs.org/" target="_blank" rel="external">Node.js</a> 4.0+</li>
<li>Under project root <ol>
<li><code>npm install</code>, install project </li>
<li><code>./start</code></li>
</ol>
</li>
<li>Install <a href="https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/Setup/Setup.html" target="_blank" rel="external">iOS Environment</a></li>
<li>Install <a href="https://guides.cocoapods.org/using/getting-started.html" target="_blank" rel="external">CocoaPods</a></li>
</ol>
</li>
<li>Run playground<ol>
<li><code>cd ios/playground</code></li>
<li><code>pod install</code></li>
<li>Open <code>WeexDemo.xcworkspace</code> in Xcode</li>
<li>Click <img src="http://img1.tbcdn.cn/L1/461/1/5470b677a2f2eaaecf412cc55eeae062dbc275f9" height="16"> (<code>Run</code> button) or use default shortcut <code>cmd + r</code> in Xcode</li>
<li>If you want to run the demo on your device. In <code>DemoDefine.h</code>(you can search this file by Xcode default shortcut <code>cmd + shift + o</code>), modify <code>CURRENT_IP</code> to your local IP</li>
</ol>
</li>
</ol>
<p>运行的结果，如下图：             </p>
<p><img src="resources/94C9F54632F28B576381F1816C1C57ED.png" alt="002\_3.png"></p>
<p>但是，我们也希望在浏览器中看到效果，那么输入如下网站也可：     </p>
<pre><code>http://127.0.0.1:12580        
</code></pre><h2 id="4-修改example"><a href="#4-修改example" class="headerlink" title="4.修改example"></a>4.修改example</h2><p><img src="resources/F7EFC1DCBD17406E556FF19833D07D98.png" alt="002\_4.png"></p>
<p>其中index.we是入口文件。因此可以在example中增加一个文件。然后在index.we中增加一个name和title。          </p>
<p><img src="resources/EE1AFFDA3B33D4DB78D5600879CBCC25.png" alt="002\_5.png"></p>
<p>刷新即可查看效果。      </p>
<h2 id="5-如何学习"><a href="#5-如何学习" class="headerlink" title="5.如何学习"></a>5.如何学习</h2><p>到这里就可以调试单独的文件了，查看各种效果以及测试语法，开发过程中的问题还是建议阅读源码</p>

          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="http://git.oschina.net/280772270/niko/niko/2017/06/20/3.初始化工程/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Yifei's">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/niko/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="NikoBlog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/niko/2017/06/20/3.初始化工程/" itemprop="url">Unbenannt</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Veröffentlicht am</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2017-06-20T10:27:12+08:00">
                2017-06-20
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h1 id="3-初始化工程"><a href="#3-初始化工程" class="headerlink" title="3.初始化工程"></a>3.初始化工程</h1><h2 id="初始化工程"><a href="#初始化工程" class="headerlink" title="初始化工程"></a>初始化工程</h2><p> 这里，我尝试用简单的方式来说明一个工程的构建。然后，再将简单的方式工程化（复杂化），最后拼凑成目前weex开源的代码结构。   </p>
<h2 id="安装weex-toolkit"><a href="#安装weex-toolkit" class="headerlink" title="安装weex-toolkit"></a>安装weex-toolkit</h2><p> <strong>这里要说明的是，目前最新版本的weex-toolkit0.5.2有bug,babel组件丢失的问题，解决办法可以添加babel组件依赖，也可以降级weex-toolkit</strong><br> <strong>下面是此问题的issue</strong><br> <a href="https://github.com/alibaba/weex/issues/1218" target="_blank" rel="external">WeexBabelError issue</a><br>weex-toolkit是一个很好的工具供我们工程构建。首先，第一步是安装该工具：   </p>
<pre><code>$npm install -g weex-toolkit       
</code></pre><p>测试weex-toolkit是否安装成功，可以使用如下命令测试：       </p>
<pre><code>$ weex --version       
info 0.4.4      
</code></pre><p>如果显示版本号即为成功。         </p>
<p>###weex-toolkit常用命令</p>
<ol>
<li>–qr :显示二维码</li>
<li>-o   ：把weex文件渲染成js</li>
<li>weex $filename :在浏览器查看we的效果</li>
</ol>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div></pre></td><td class="code"><pre><div class="line">^Cbogon:WeexProj Tec_yifei$ weex</div><div class="line">info </div><div class="line">Usage: weex foo/bar/we_file_or_dir_path  [options]</div><div class="line">Usage: weex init</div><div class="line"></div><div class="line">选项：</div><div class="line">  --qr          display QR code for native runtime, default action     [boolean]</div><div class="line">  -o, --output  transform weex we file to JS Bundle, output path must specified</div><div class="line">                (single JS bundle file or dir)</div><div class="line">                [for create sub cmd]it specified we file output path</div><div class="line">                                                  [默认值: "no JSBundle output"]</div><div class="line">  --watch       using with -o , watch input path , auto run transform if change</div><div class="line">                happen</div><div class="line">  -s, --server  start a http file server, weex .we file will be transforme to JS</div><div class="line">                bundle on the server , specify local root path using the option</div><div class="line">                                                                        [string]</div><div class="line">  --port        http listening port number ,default is 8081         [默认值: -1]</div><div class="line">  --wsport      websocket listening port number ,default is 8082    [默认值: -1]</div><div class="line">  --np          do not open preview browser automatic                  [boolean]</div><div class="line">  -f, --force   [for create sub cmd]force to replace exsisting file(s) [boolean]</div><div class="line">  --help        显示帮助信息                                           [boolean]</div><div class="line">  -h, --host                                               [默认值: "127.0.0.1"]</div><div class="line"></div><div class="line">for example &amp; more information visit https://www.npmjs.com/package/weex-toolkit</div></pre></td></tr></table></figure>
<h2 id="创建项目"><a href="#创建项目" class="headerlink" title="创建项目"></a>创建项目</h2><p>这里，我们不再使用weex 跑一个文件的形式。我们需要一个较为完整的方案，因此，这里采用weex init命令创建项目。         </p>
<p>首先，我们创建一个目录存放我们的项目，启动命令行：     </p>
<pre><code>$ mkdir test      
$ cd test    
$ weex init 
    //下面一路回车
    prompt: Project Name:  (test) 
    file: .gitignore created.
    file: README.md created.
    file: index.html created.
    file: package.json created.
    file: src/main.we created.
    file: webpack.config.js created.     
</code></pre><h2 id="跑起项目"><a href="#跑起项目" class="headerlink" title="跑起项目"></a>跑起项目</h2><p>首先，我们需要安装依赖。以后大家看到package.json文件，就可以直接npm install 安装模块了。           </p>
<pre><code>$ npm install 
</code></pre><p>依赖安装完成，启动项目编译。</p>
<pre><code>$ npm run dev       
</code></pre><p> 启动本地服务器。    </p>
<pre><code>$ npm run serve            
</code></pre><p> 这时，打开浏览器，输入<a href="http://127.0.0.1:8080" target="_blank" rel="external">http://127.0.0.1:8080</a>, 就会看到如下界面效果:       </p>
<p><img src="resources/C0BBB74BD2AB01B005799E3C19DA4B42.png" alt="003\_1.png"></p>
<h2 id="npm-run-dev干了什么事儿"><a href="#npm-run-dev干了什么事儿" class="headerlink" title="npm run dev干了什么事儿"></a>npm run dev干了什么事儿</h2><p>这一些都是node/npm的常识了（所以对于萌新来说这都是坑）。首先，我们打开package.json文件。可以看到如下代码：     </p>
<p><img src="resources/17938710144706F3052DDAFA73DEE6D4.png" alt="QQ20160926-3.png"></p>
<p> 我们可以看到scripts里面包含了build、dev、serve、test四个属性。例如dev属性,npm run dev实际上相当于 webpack –watch。即等同开发者做了这件事:   </p>
<pre><code>$ webpack --watch        
</code></pre><p> ok，看到这里明白了。npm run dev调用了webpack。那么，webpack实际上是执行了配置文件。<br> webpack默认是webpack.config.js作为配置文件的。所以看一下webpack.config.js中的内容。       </p>
<p><strong>关于webpack的学习资料</strong><br><a href="https://segmentfault.com/a/1190000002551952" target="_blank" rel="external">webpack入门指迷</a></p>
<p><img src="resources/8EB8FDA4F1641F3B97F9A7C04E8E0A78.png" alt="QQ20160926-4.png"></p>
<p>  这个文件比较好理解。一个是引入了webpack的配置，一个是使用了weex-loader模块。<br>  entry属性是表示入口文件，output表示输出文件，默认输出到dist文件夹。所有打开dist就可以看到一个打包完成的main.js文件。      </p>
<h2 id="npm-run-serve"><a href="#npm-run-serve" class="headerlink" title="npm run serve"></a>npm run serve</h2><p>这个同上，主要是做一个服务器，提供浏览器访问静态资源。     </p>
<h2 id="入口文件index-html"><a href="#入口文件index-html" class="headerlink" title="入口文件index.html"></a>入口文件index.html</h2><p>是时候，去了解我们index.html文件干了一件啥事。其实，index.html就是页面的入口文件。具体大码如下：            </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Weex HTML5<span class="tag">&lt;/<span class="name">title</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"apple-mobile-web-app-capable"</span> <span class="attr">content</span>=<span class="string">"yes"</span> /&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"apple-mobile-web-app-status-bar-style"</span> <span class="attr">content</span>=<span class="string">"black"</span> /&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"apple-touch-fullscreen"</span> <span class="attr">content</span>=<span class="string">"yes"</span> /&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"format-detection"</span> <span class="attr">content</span>=<span class="string">"telephone=no, email=no"</span> /&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></div><div class="line">    html, body, #weex &#123;</div><div class="line">      width: 100%;</div><div class="line">      height: 100%;</div><div class="line">    &#125;</div><div class="line">  <span class="tag">&lt;/<span class="name">style</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/weex-html5/dist/weex.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"weex"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line">  /**</div><div class="line">   * Init weex instance depending on the url params.</div><div class="line">   * There are three ways to load weex bundles, depends on the</div><div class="line">   * parameter 'loader' in the url:</div><div class="line">   *</div><div class="line">   *   + xhr: use XMLHttpRequest. Parameter 'page' should be</div><div class="line">   *   the bundle's url.</div><div class="line">   *   + source: use the transformed code itself. 'page' should</div><div class="line">   *   be the transformed weex bundle.</div><div class="line">   *</div><div class="line">   * @param &#123;String&#125; bundle - It has different meaning depends on</div><div class="line">   *   the type of loader.</div><div class="line">   */</div><div class="line">  (function () &#123;</div><div class="line">    function getUrlParam (key) &#123;</div><div class="line">      var reg = new RegExp('[?|&amp;]' + key + '=([^&amp;]+)')</div><div class="line">      var match = location.search.match(reg)</div><div class="line">      return match &amp;&amp; match[1]</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    var loader = getUrlParam('loader') || 'xhr'</div><div class="line">    var page = getUrlParam('page') || 'dist/main.js'</div><div class="line"></div><div class="line">    window.weex.init(&#123;</div><div class="line">      appId: location.href,</div><div class="line">      loader: loader,</div><div class="line">      source: page,</div><div class="line">      rootId: 'weex'</div><div class="line">    &#125;)</div><div class="line">  &#125;)();</div><div class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
<p>作为入口和载体，html做了两件事：<br>1) 拿到页面的URL，根据page参数获得需要加载的js文件路径<br>2）初始化weex实例，加载文件。<br>此处文章可参考：<a href="http://alibaba.github.io/weex/doc/advanced/integrate-to-html5.html" target="_blank" rel="external">http://alibaba.github.io/weex/doc/advanced/integrate-to-html5.html</a>     </p>
<h2 id="更好的理解weex-github源码结构"><a href="#更好的理解weex-github源码结构" class="headerlink" title="更好的理解weex github源码结构"></a>更好的理解weex github源码结构</h2><p>到这里，整个weex项目的来龙去脉，应该是比较清楚了。那么，回过头来看，weex开源代码如何构建，应该是件水到渠成的事了。比如看这段打包的配置代码：<a href="https://github.com/alibaba/weex/blob/dev/build/webpack.examples.config.js" target="_blank" rel="external">https://github.com/alibaba/weex/blob/dev/build/webpack.examples.config.js</a>          </p>
<pre><code class="javascript"><span class="keyword">var</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>);
<span class="keyword">var</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>);

<span class="keyword">var</span> entry = {};

<span class="function"><span class="keyword">function</span> <span class="title">walk</span>(<span class="params">dir</span>) </span>{
  dir = dir || <span class="string">'.'</span>
  <span class="keyword">var</span> directory = path.join(__dirname, <span class="string">'../examples'</span>, dir);
  fs.readdirSync(directory)
    .forEach(<span class="function"><span class="keyword">function</span>(<span class="params">file</span>) </span>{
      <span class="keyword">var</span> fullpath = path.join(directory, file);
      <span class="keyword">var</span> stat = fs.statSync(fullpath);
      <span class="keyword">var</span> extname = path.extname(fullpath);
      <span class="keyword">if</span> (stat.isFile() &amp;&amp; extname === <span class="string">'.we'</span>) {
        <span class="keyword">var</span> name = path.join(<span class="string">'examples'</span>, <span class="string">'build'</span>, dir, path.basename(file, extname));
        entry[name] = fullpath + <span class="string">'?entry=true'</span>;
      } <span class="keyword">else</span> <span class="keyword">if</span> (stat.isDirectory() &amp;&amp; file !== <span class="string">'build'</span> &amp;&amp; file !== <span class="string">'include'</span>) {
        <span class="keyword">var</span> subdir = path.join(dir, file);
        walk(subdir);
      }
    });
}

walk();

<span class="built_in">module</span>.exports = {
  <span class="attr">entry</span>: entry,
  <span class="attr">output</span> : {
    <span class="attr">path</span>: <span class="string">'.'</span>,
    <span class="attr">filename</span>: <span class="string">'[name].js'</span>
  },
  <span class="attr">module</span>: {
    <span class="attr">loaders</span>: [
      {
        <span class="attr">test</span>: <span class="regexp">/\.we(\?[^?]+)?$/</span>,
        <span class="attr">loader</span>: <span class="string">'weex'</span>
      },
      {
        <span class="attr">test</span>: <span class="regexp">/\.js(\?[^?]+)?$/</span>,
        <span class="attr">loader</span>: <span class="string">'weex?type=script'</span>
      },
      {
        <span class="attr">test</span>: <span class="regexp">/\.css(\?[^?]+)?$/</span>,
        <span class="attr">loader</span>: <span class="string">'weex?type=style'</span>
      }, 
      {
        <span class="attr">test</span>: <span class="regexp">/\.html(\?[^?]+)?$/</span>,
        <span class="attr">loader</span>: <span class="string">'weex?type=tpl'</span>
      }
    ]
  }
}
</code></pre>
<p>就是编译examples目录下所有.we文件到build目录。代码可以细看，都是Node.js File System相关的API.     </p>
<p>###附录</p>
<p>1、<a href="http://zct1989.oschina.io/2016/07/04/weex1/" target="_blank" rel="external">weex环境搭建</a><br>2、<a href="http://zct1989.oschina.io/2016/07/06/weex2/" target="_blank" rel="external">weex的HelloWorld起手式</a></p>

          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="http://git.oschina.net/280772270/niko/niko/2017/06/20/4.了解工程/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Yifei's">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/niko/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="NikoBlog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/niko/2017/06/20/4.了解工程/" itemprop="url">Unbenannt</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Veröffentlicht am</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2017-06-20T10:27:12+08:00">
                2017-06-20
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h1 id="4-了解工程"><a href="#4-了解工程" class="headerlink" title="4.了解工程"></a>4.了解工程</h1><h2 id="了解工程"><a href="#了解工程" class="headerlink" title="了解工程"></a>了解工程</h2><p>目前基于npm的程序越来越多，那么package.json就显得十分必要了。所以说对于weex项目的开发npm和webpack的使用还是很重要的。</p>
<h2 id="需要了解什么"><a href="#需要了解什么" class="headerlink" title="需要了解什么"></a>需要了解什么</h2><p>如果是单一职责的工程师，比如单纯的前端工程师。那么他在开发的时候需要了解什么？这个对于项目的开发者而言，比较重要。因为，一个比较的好界限可以快速上手工作。当然，我还是提倡都要有所了解，毕竟，了解三端，才能更加高效的开发优质移动应用，技多不压身嘛。 这里简单谈一下单纯的某一职责的工程师，建议应该了解些什么。         </p>
<ul>
<li>前端工程师<br>  我认为web工程师应该最好上手了，大部分都应该是分内知识，例如盒子模型、Flexbox布局等；webpack工程构建也已经是普遍情况了。那么前端工程师应该去了解XCode安装及如何运行项目、了解CocoaPods。了解Android环境的搭建和工程的构建。            </li>
<li>iOS工程师<br>对于iOS工程师，大体需要了解的是web的样式和布局。还有前面提到的webpack.config.js和package.json。        </li>
<li>Android工程师<br>  布局和样式这块，Android和前端有一定的相通之处，但是盒子模型有些差异。这一块是需要补充了解的。当然，了解webpack.config.js和package.json也是十分重要的。            </li>
</ul>
<h2 id="协同合作"><a href="#协同合作" class="headerlink" title="协同合作"></a>协同合作</h2><p>Weex是集三端的一个技术产品，因此三端都不可或缺。很多时候Weex不可能满足海量的需求，也无法去给每一位开发者定制。因此，自己动手风衣足食。     </p>
<ul>
<li><p>扩展iOS组件：<a href="http://alibaba.github.io/weex/doc/advanced/extend-to-ios.html" target="_blank" rel="external">http://alibaba.github.io/weex/doc/advanced/extend-to-ios.html</a>    </p>
</li>
<li><p>扩展Android组件：<a href="http://alibaba.github.io/weex/doc/advanced/extend-to-android.html" target="_blank" rel="external">http://alibaba.github.io/weex/doc/advanced/extend-to-android.html</a>    </p>
</li>
<li>扩展Web组件： <a href="http://alibaba.github.io/weex/doc/advanced/extend-to-html5.html" target="_blank" rel="external">http://alibaba.github.io/weex/doc/advanced/extend-to-html5.html</a>    </li>
<li>与iOS集成： <a href="http://alibaba.github.io/weex/doc/advanced/integrate-to-ios.html" target="_blank" rel="external">http://alibaba.github.io/weex/doc/advanced/integrate-to-ios.html</a>   </li>
<li>与Android集成：<a href="http://alibaba.github.io/weex/doc/advanced/extend-to-android.html" target="_blank" rel="external">http://alibaba.github.io/weex/doc/advanced/extend-to-android.html</a>    </li>
<li>与Web集成：<a href="http://alibaba.github.io/weex/doc/advanced/integrate-to-html5.html" target="_blank" rel="external">http://alibaba.github.io/weex/doc/advanced/integrate-to-html5.html</a>    </li>
</ul>

          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="http://git.oschina.net/280772270/niko/niko/2017/06/20/5.ide的选择和配置/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Yifei's">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/niko/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="NikoBlog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/niko/2017/06/20/5.ide的选择和配置/" itemprop="url">Unbenannt</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Veröffentlicht am</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2017-06-20T10:27:12+08:00">
                2017-06-20
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h1 id="5-ide的选择和配置"><a href="#5-ide的选择和配置" class="headerlink" title="5.ide的选择和配置"></a>5.ide的选择和配置</h1><h2 id="ide的选择"><a href="#ide的选择" class="headerlink" title="ide的选择"></a>ide的选择</h2><p>ide这方面我还是比较推荐<a href="http://www.sublimetext.com/3" target="_blank" rel="external">Sublime Text</a>按需求下载<br><a href="http://www.jianshu.com/p/656b0c24141e" target="_blank" rel="external">激活步骤</a><br>以上都是在Mac开发环境下的配置，Windows的就不贴了</p>
<p>##SublimeText语法高亮</p>
<ol>
<li>首先下载—&gt;<a href="https://pan.baidu.com/s/1nvdIigD" target="_blank" rel="external">配置文件</a> <strong>密码: d8k8</strong></li>
<li>导航栏里选择Tools-&gt;Developer-&gt;New Syntax</li>
<li>打开下载的文件，复制到New Syntax新创建的文件当中，然后保存（保存的名字为Plain we.sublime-syntax）</li>
<li>打开.we文件，这时候应该就有语法高亮了</li>
</ol>
<p>##idea或者WebStrom<br>下面是激活码</p>
<p>8NGRYV8NBV-eyJsaWNlbnNlSWQiOiI4TkdSWVY4TkJWIiwibGljZW5zZWVOYW1lIjoiYWxpY2FzIGFnaWxlIiwi</p>
<p>YXNzaWduZWVOYW1lIjoiIiwiYXNzaWduZWVFbWFpbCI6IiIsImxpY2Vuc2VSZXN0cmljdGlvbiI6</p>
<p>IkZvciBlZHVjYXRpb25hbCB1c2Ugb25seSIsImNoZWNrQ29uY3VycmVudFVzZSI6ZmFsc2UsInBy</p>
<p>b2R1Y3RzIjpbeyJjb2RlIjoiSUkiLCJwYWlkVXBUbyI6IjIwMTctMDUtMjEifSx7ImNvZGUiOiJB</p>
<p>QyIsInBhaWRVcFRvIjoiMjAxNy0wNS0yMSJ9LHsiY29kZSI6IkRQTiIsInBhaWRVcFRvIjoiMjAx</p>
<p>Ny0wNS0yMSJ9LHsiY29kZSI6IlBTIiwicGFpZFVwVG8iOiIyMDE3LTA1LTIxIn0seyJjb2RlIjoi</p>
<p>RE0iLCJwYWlkVXBUbyI6IjIwMTctMDUtMjEifSx7ImNvZGUiOiJDTCIsInBhaWRVcFRvIjoiMjAx</p>
<p>Ny0wNS0yMSJ9LHsiY29kZSI6IlJTMCIsInBhaWRVcFRvIjoiMjAxNy0wNS0yMSJ9LHsiY29kZSI6</p>
<p>IlJDIiwicGFpZFVwVG8iOiIyMDE3LTA1LTIxIn0seyJjb2RlIjoiUEMiLCJwYWlkVXBUbyI6IjIw</p>
<p>MTctMDUtMjEifSx7ImNvZGUiOiJSTSIsInBhaWRVcFRvIjoiMjAxNy0wNS0yMSJ9LHsiY29kZSI6</p>
<p>IldTIiwicGFpZFVwVG8iOiIyMDE3LTA1LTIxIn0seyJjb2RlIjoiREIiLCJwYWlkVXBUbyI6IjIw</p>
<p>MTctMDUtMjEifSx7ImNvZGUiOiJEQyIsInBhaWRVcFRvIjoiMjAxNy0wNS0yMSJ9XSwiaGFzaCI6</p>
<p>IjM4MTEyNTYvMCIsImdyYWNlUGVyaW9kRGF5cyI6MCwiYXV0b1Byb2xvbmdhdGVkIjpmYWxzZSwi</p>
<p>aXNBdXRvUHJvbG9uZ2F0ZWQiOmZhbHNlfQ==-ZkM30EtrYD1I1yfVlugRks1bv/0hs4IuraASRo3Wj0J1l+6MiR0V3aH1NTomi6bQKl3iACHpcoeg</p>
<p>0ZAwyOpKPbCF1TrgPMvXLhFFS1D9BtaMaPdmVOY098jIwIxKs4WrtaKHJOqmvjmS64QyQW/LmTXQ</p>
<p>J+lPNJZ81fcB8GDbc8EJfzlC5byhPiCAveZMT60lu5ZWn7jdSQTOrXZYeyPz0ZQjbI1F6yS0IGs6</p>
<p>65NJRUBujUEGWdmpqalg1abrD/flSK1Acz4jJoxWEtad8MfqXKW3Ugo8EAGVUqlasC3yyiiD8NdJ</p>
<p>Zx6fqMvDJTpdwlzMmeR1EV/PXmh8gd58A+3eKQ==-MIIEPjCCAiagAwIBAgIBBTANBgkqhkiG9w0BAQsFADAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENB</p>
<p>MB4XDTE1MTEwMjA4MjE0OFoXDTE4MTEwMTA4MjE0OFowETEPMA0GA1UEAwwGcHJvZDN5MIIBIjAN</p>
<p>BgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxcQkq+zdxlR2mmRYBPzGbUNdMN6OaXiXzxIWtMEk</p>
<p>rJMO/5oUfQJbLLuMSMK0QHFmaI37WShyxZcfRCidwXjot4zmNBKnlyHodDij/78TmVqFl8nOeD5+</p>
<p>07B8VEaIu7c3E1N+e1doC6wht4I4+IEmtsPAdoaj5WCQVQbrI8KeT8M9VcBIWX7fD0fhexfg3ZRt</p>
<p>0xqwMcXGNp3DdJHiO0rCdU+Itv7EmtnSVq9jBG1usMSFvMowR25mju2JcPFp1+I4ZI+FqgR8gyG8</p>
<p>oiNDyNEoAbsR3lOpI7grUYSvkB/xVy/VoklPCK2h0f0GJxFjnye8NT1PAywoyl7RmiAVRE/EKwID</p>
<p>AQABo4GZMIGWMAkGA1UdEwQCMAAwHQYDVR0OBBYEFGEpG9oZGcfLMGNBkY7SgHiMGgTcMEgGA1Ud</p>
<p>IwRBMD+AFKOetkhnQhI2Qb1t4Lm0oFKLl/GzoRykGjAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENB</p>
<p>ggkA0myxg7KDeeEwEwYDVR0lBAwwCgYIKwYBBQUHAwEwCwYDVR0PBAQDAgWgMA0GCSqGSIb3DQEB</p>
<p>CwUAA4ICAQC9WZuYgQedSuOc5TOUSrRigMw4/+wuC5EtZBfvdl4HT/8vzMW/oUlIP4YCvA0XKyBa</p>
<p>CJ2iX+ZCDKoPfiYXiaSiH+HxAPV6J79vvouxKrWg2XV6ShFtPLP+0gPdGq3x9R3+kJbmAm8w+FOd</p>
<p>lWqAfJrLvpzMGNeDU14YGXiZ9bVzmIQbwrBA+c/F4tlK/DV07dsNExihqFoibnqDiVNTGombaU2d</p>
<p>Dup2gwKdL81ua8EIcGNExHe82kjF4zwfadHk3bQVvbfdAwxcDy4xBjs3L4raPLU3yenSzr/OEur1</p>
<p>+jfOxnQSmEcMXKXgrAQ9U55gwjcOFKrgOxEdek/Sk1VfOjvS+nuM4eyEruFMfaZHzoQiuw4IqgGc</p>
<p>45ohFH0UUyjYcuFxxDSU9lMCv8qdHKm+wnPRb0l9l5vXsCBDuhAGYD6ss+Ga+aDY6f/qXZuUCEUO</p>
<p>H3QUNbbCUlviSz6+GiRnt1kA9N2Qachl+2yBfaqUqr8h7Z2gsx5LcIf5kYNsqJ0GavXTVyWh7PYi</p>
<p>KX4bs354ZQLUwwa/cG++2+wNWP+HtBhVxMRNTdVhSm38AknZlD+PTAsWGu9GyLmhti2EnVwGybSD</p>
<p>2Dxmhxk3IPCkhKAK+pl0eWYGZWG3tJ9mZ7SowcXLWDFAk0lRJnKGFMTggrWjV8GYpw5bq23VmIqq</p>
<p>DLgkNzuoog==</p>
<p>##语法高亮</p>
<p><img src="resources/0AC5A93562319D348DA032FAFBF75CB3.png" alt="QQ20160926-5.png"></p>
<p>原理就是把 *.we 的文件识别成HTML同样也可以语法高亮，idea有一个民间大神开发的weex插件，可以在右侧直接预览效果以及快速生成当前页面的二维码，蛮不错。</p>

          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="http://git.oschina.net/280772270/niko/niko/2017/06/20/CoreSpotlight 学习/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Yifei's">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/niko/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="NikoBlog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/niko/2017/06/20/CoreSpotlight 学习/" itemprop="url">Unbenannt</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Veröffentlicht am</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2017-06-20T10:27:04+08:00">
                2017-06-20
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h1 id="CoreSpotlight-学习"><a href="#CoreSpotlight-学习" class="headerlink" title="CoreSpotlight 学习"></a>CoreSpotlight 学习</h1><p>#简介<br>&lt;CoreSpotlight&gt;是 <strong>iOS9 / Xcode7</strong> 提供的一组新的API来帮助你建立起你的应用中的索引。CoreSpotlight是用来处理用户数据<br>要使用CoreSpotlight首先要在工程-&gt;Build Phases-&gt;Link Binary With Libraries-&gt;搜索CoreSpotlight引入Framework</p>
<h1 id="搜索结果的初始化以及添加"><a href="#搜索结果的初始化以及添加" class="headerlink" title="搜索结果的初始化以及添加"></a>搜索结果的初始化以及添加</h1><blockquote>
<p><strong>CSSearchableItemAttributeSet</strong> ：声明CSSearchableItem包含的元数据。</p>
</blockquote>
<p>####CSSearchableItemAttributeSet 方法 <a href="http://e.hiphotos.baidu.com/image/pic/item/42166d224f4a20a42adfcc5c99529822730ed06c.jpg" target="_blank" rel="external">点击此处查看效果</a></p>
<figure class="highlight objc"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/*应用内搜索object，想搜索到多少种界面就要创建多少个set ，每个set都要对应一个item*/</span></div><div class="line">    CSSearchableItemAttributeSet *firstSet = [[CSSearchableItemAttributeSet alloc] initWithItemContentType:<span class="string">@"firstSet"</span>];</div><div class="line"><span class="comment">//标题</span></div><div class="line">    firstSet.title = <span class="string">@"搜索结果1"</span>;</div><div class="line"><span class="comment">//详细描述</span></div><div class="line">    firstSet.contentDescription = <span class="string">@"这是spotlight第一条搜索结果"</span>;</div><div class="line"><span class="comment">//关键字，搜索索引  经测试长的字符串spotlight可以自动模糊搜索，所以关键词</span></div><div class="line">    <span class="built_in">NSArray</span> *firstSeachKey = @[<span class="string">@"CoreSpotlight"</span>,<span class="string">@"结果"</span>,<span class="string">@"测试"</span>,<span class="string">@"搜索"</span>];</div><div class="line">    firstSet.contactKeywords = firstSeachKey;</div><div class="line"><span class="comment">//缩略图</span></div><div class="line">    firstSet.thumbnailData = [<span class="built_in">NSData</span> dataWithContentsOfURL:[<span class="built_in">NSURL</span> URLWithString:<span class="string">@"http://static0.tuicool.com/profile/05fcaf20abfa_1479439428.jpg"</span>]];</div></pre></td></tr></table></figure>
<blockquote>
<p><strong>CSSearchableItem</strong> 是CSSearchableItemAttributeSet的内容</p>
</blockquote>
<p>####CSSearchableItem 方法</p>
<figure class="highlight objc"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//UniqueIdentifier每个搜索都有一个唯一标示，当用户点击搜索到得某个内容的时候，系统会调用代理方法，会将这个唯一标示传给你，以便让你确定是点击了哪一个，方便做页面跳转</span></div><div class="line"><span class="comment">//domainIdentifier搜索域标识，删除条目的时候调用的delegate会传过来这个值</span></div><div class="line">    CSSearchableItem *firstItem = [[CSSearchableItem alloc] initWithUniqueIdentifier:<span class="string">@"thirdItem"</span> domainIdentifier:<span class="string">@"third"</span> attributeSet:firstSet];</div></pre></td></tr></table></figure>
<blockquote>
<p>CSSearchableIndex 将初始好的items加入到搜索数据源里</p>
</blockquote>
<figure class="highlight objc"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">[[CSSearchableIndex defaultSearchableIndex] indexSearchableItems:@[firstItem] completionHandler:^(<span class="built_in">NSError</span> * _Nullable error) &#123;</div><div class="line">        <span class="keyword">if</span> (error) &#123;</div><div class="line">            <span class="built_in">NSLog</span>(<span class="string">@"设置失败%@"</span>,error);</div><div class="line">        &#125;<span class="keyword">else</span>&#123;</div><div class="line">            <span class="built_in">NSLog</span>(<span class="string">@"设置成功"</span>);</div><div class="line">        &#125;</div><div class="line">    &#125;];</div></pre></td></tr></table></figure>
<h1 id="用户点击搜索结果的交互"><a href="#用户点击搜索结果的交互" class="headerlink" title="用户点击搜索结果的交互"></a>用户点击搜索结果的交互</h1><blockquote>
<p>类似remote消息，在”AppDelegate.m”里面实现以下方法</p>
</blockquote>
<figure class="highlight objc"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">- (<span class="built_in">BOOL</span>)application:(<span class="built_in">UIApplication</span> *)application continueUserActivity:(<span class="built_in">NSUserActivity</span> *)userActivity restorationHandler:(<span class="keyword">void</span> (^)(<span class="built_in">NSArray</span> * _Nullable))restorationHandler&#123;</div><div class="line">    </div><div class="line">    <span class="built_in">NSString</span> *dentifier  = userActivity.userInfo[<span class="string">@"kCSSearchableItemActivityIdentifier"</span>];</div><div class="line">    <span class="comment">//这里做一个封装好的来处理交互消息</span></div><div class="line">    <span class="keyword">return</span> <span class="literal">YES</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>#索引的删除</p>
<blockquote>
<p>CSSearchableIndex 提供了三种方法来删除索引</p>
</blockquote>
<figure class="highlight objc"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">[CSSearchableIndex defaultSearchableIndex]<span class="comment">//系统SearchableIndex的单例</span></div><div class="line">- (<span class="keyword">void</span>)deleteSearchableItemsWithIdentifiers:(<span class="built_in">NSArray</span>&lt;<span class="built_in">NSString</span> *&gt; *)identifiers completionHandler:(<span class="keyword">void</span> (^ __<span class="keyword">nullable</span>)(<span class="built_in">NSError</span> * __<span class="keyword">nullable</span> error))completionHandler; </div><div class="line"></div><div class="line">- (<span class="keyword">void</span>)deleteSearchableItemsWithDomainIdentifiers:(<span class="built_in">NSArray</span>&lt;<span class="built_in">NSString</span> *&gt; *)domainIdentifiers completionHandler:(<span class="keyword">void</span> (^ __<span class="keyword">nullable</span>)(<span class="built_in">NSError</span> * __<span class="keyword">nullable</span> error))completionHandler;</div><div class="line"></div><div class="line"> - (<span class="keyword">void</span>)deleteAllSearchableItemsWithCompletionHandler:(<span class="keyword">void</span> (^ __<span class="keyword">nullable</span>)(<span class="built_in">NSError</span> * __<span class="keyword">nullable</span> error))completionHandler;</div></pre></td></tr></table></figure>
<p>#总结</p>
<blockquote>
<p>关于CSSearchableItemAttributeSet</p>
</blockquote>
<ol>
<li>contactKeywords的搜索索引，经过测试，<strong>一段长文字spotlight可以自动模糊匹配</strong>，比如将key设为“这是spotlight第一条搜索结果”输入“这是”、“zhes”、“第一条”···都会匹配搜索结果，key的长度没有进行验证</li>
<li>经测试缩略图的添加可以采用URL的方式，不用唤醒app，应该是系统自动根据URL读取其中的data</li>
<li>通过查看CSSearchableItemAttributeSet的头文件推测搜索结果支持国际化语言</li>
</ol>
<blockquote>
<p>关于UniqueIdentifier和domainIdentifier的设定</p>
</blockquote>
<ol>
<li>可以通过统一的前缀来设置关联，用于区分跳转以及删除和关闭某些敏感信息的搜索结果</li>
<li>通过UniqueIdentifier携带的信息来区分类别以及执行跳转至后的动作</li>
</ol>
<blockquote>
<p>关于搜索结果的插入</p>
</blockquote>
<ol>
<li>通过把玩新浪微博以及即刻脉脉之后发现，搜索的结果应该是之前打开app加载好的数据，相当于做了一个缓存，而之前没有加载的数据是不会搜索到的，所以猜测这个搜索是不能唤起app内部执行网络请求的。比如我之前微博没有关注“谢娜”，在spotlight搜索“谢娜”没有搜索结果，当我在微博里点进去谢娜的主页之后再出来搜索结果就出现了。</li>
<li>插入逻辑可以在数据请求成功后对不同的Model异步进行thumbData、title、description的处理</li>
</ol>
<blockquote>
<p>关于搜索结果的删除和关闭app在spotlight的显示</p>
</blockquote>
<ol>
<li>初步设想首先根据UniqueIdentifier和domainIdentifier对搜索结果进行分类，删除的时候调用CSSearchableIndex的方法统一删除，并且在插入搜索结果的工具类里进行Model屏蔽</li>
</ol>
<p>##参考文档<br><a href="http://www.cnblogs.com/CocoonJin/p/4703366.html" target="_blank" rel="external">iOS 9之应用内搜索(CoreSpotlight）API - CocoonJin的博客</a><br><a href="http://www.cnblogs.com/KingQiangzi/p/4861851.html" target="_blank" rel="external">iOS 9 应用内搜索(CoreSpotlight）的使用 - 魅风追影</a><br><a href="https://developer.apple.com/reference/corespotlight" target="_blank" rel="external">Apple Core Spotlight 文档</a></p>

          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
  </section>

  


          </div>
          


          

        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      

      <section class="site-overview sidebar-panel sidebar-panel-active">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/niko/images/avatar.gif"
               alt="Yifei's" />
          <p class="site-author-name" itemprop="name">Yifei's</p>
           
              <p class="site-description motion-element" itemprop="description"></p>
          
        </div>
        <nav class="site-state motion-element">

          
            <div class="site-state-item site-state-posts">
              <a href="/niko/archives/">
                <span class="site-state-item-count">7</span>
                <span class="site-state-item-name">Artikel</span>
              </a>
            </div>
          

          

          

        </nav>

        

        <div class="links-of-author motion-element">
          
        </div>

        
        

        
        

        


      </section>

      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2017</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Yifei's</span>
</div>


<div class="powered-by">
  Erstellt mit  <a class="theme-link" href="https://hexo.io">Hexo</a>
</div>

<div class="theme-info">
  Theme -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Mist
  </a>
</div>


        

        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  <script type="text/javascript" src="/niko/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/niko/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/niko/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/niko/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/niko/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/niko/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/niko/js/src/utils.js?v=5.1.1"></script>

  <script type="text/javascript" src="/niko/js/src/motion.js?v=5.1.1"></script>



  
  

  
    <script type="text/javascript" src="/niko/js/src/scrollspy.js?v=5.1.1"></script>
<script type="text/javascript" src="/niko/js/src/post-details.js?v=5.1.1"></script>

  

  


  <script type="text/javascript" src="/niko/js/src/bootstrap.js?v=5.1.1"></script>



  


  




	





  





  





  






  





  

  

  

  

  

  

</body>
</html>
